<style lang="less">
    @import "debitBatchDetail.less";
</style>
<template>
    <div>
        <Card>
            <Row>
                <div class="search">
                    <Row>
                        <Form  ref="searchForm" :model="searchForm" inline :label-width="85" class="search-form">
                            <Row>
                                <Form-item label="扣款日期">
                                    <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd" clearable
                                                @on-change="selectDateRange" placeholder="选择起始时间">
                                    </DatePicker>
                                </Form-item>
                                <Form-item label="合同号码" prop="contractNo">
                                    <Input type="text" v-model="searchForm.contractNo" clearable placeholder="请输入合同号码"
                                           style="width: 180px"/>
                                </Form-item>
                                <Form-item label="账户名" prop="debitAccountName">
                                    <Input type="text" v-model="searchForm.debitAccountName" clearable placeholder="请输入账户名"
                                           style="width: 180px"/>
                                </Form-item>
                                <Form-item label="合同状态" prop="contractStatus">
                                    <Select v-model="searchForm.contractStatus" style="width:180px" clearable placeholder="请选择合同状态">
                                        <Option v-for="item in dataDic.contractStatus" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="扣款状态" prop="status">
                                    <Select v-model="searchForm.debitStatus" style="width:180px" clearable placeholder="请选择扣款状态">
                                        <Option value="successDebit" label="扣款成功" key="successDebit">扣款成功</Option>
                                        <Option value="failDebit" label="扣款失败" key="failDebit">扣款失败</Option>
                                        <Option value="noResult" label="尚无扣款结果" key="noResult">尚无扣款结果</Option>
                                    </Select>
                                </Form-item>
                                <Form-item label="扣款银行" prop="deductBank">
                                    <Select v-model="searchForm.deductBank"  clearable placeholder="请选择扣款银行">
                                        <Option v-for="item in dataDic.deductBank" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                    </Select>
                                </Form-item>
                            </Row>
                            <Row>
                                <Col align="middle">
                                    <Form-item>
                                        <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                        <Button @click="handleReset" type="primary" icon="ios-trash">重置</Button>
                                    </Form-item>
                                </Col>
                            </Row>
                        </Form>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="batchDetailList" sortable="custom"
                                ref="table">
                            <template slot-scope="{ row, index }" slot="contractStatus">
                                <span>{{setDictTitleByType("contractStatus",row.contractStatus)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="status">
                                <span>{{setDictTitleByType("debitStatus",row.status)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="debitSignBank">
                                <span>{{setDictTitleByType("deductBank",row.debitSignBank)}}</span>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </div>
            </Row>
        </Card>
    </div>
</template>

<script>
    import debitRecord from './debitRecord.vue';
    import {
        getByTypes
    } from "_p/basic/api/admin/datadic";
    import {
        queryDebitBatch,
        queryDebitDetailList
    } from "@/projects/basic/api/contract/debit-management/debitManagement";
    export default {
        name: "debit-history",
        components:{
            debitRecord
        },
        data(){
            return{
                value:"1",
                batchJobInfo:{},
                dicKeys: [
                    "deductBank","batchStatus","contractStatus","debitStatus","feeType","debitMode"
                ],
                dataDic:{},
                batchDetailList:[],
                columns: [
                    {
                        type: 'expand',
                        width: 30,
                        render: (h, table) => {
                            return h(debitRecord, {
                                props: {
                                    recordList: table.row.recordList,
                                    feeTypes:this.getDic("feeType")
                                }
                            })
                        }
                    },
                    {title: "批次号码",key: "batchNo",minWidth: 160,align: "center"},
                    {title: "申请编号",key: "applyNo",minWidth: 150,align: "center"},
                    {title: "合同号码",key: "contractNo",minWidth: 200,align: "center"},
                    {title: "合同状态",key: "contractStatus",minWidth: 100,align: "center",slot: "contractStatus"},
                    {title: "扣款金额",key: "amount",minWidth: 100,align: "center"},
                    {title: "扣款状态",key: "status",minWidth: 120,align: "center",slot: "status"},
                    {title: "扣款签约银行",key: "debitSignBank",minWidth: 110,align: "center",slot: "debitSignBank"},
                    {title: "账号",key: "debitAccount",minWidth: 180,align: "center"},
                    {title: "账户名",key: "debitAccountName",minWidth: 100,align: "center"},
                    {title: "证件号码",key: "debitCertNo",minWidth: 165,align: "center"},
                    {title: "手机号码",key: "debitCardPhone",minWidth: 120,align: "center"},
                    {title: "扣款指令时间",key: "createTime",minWidth: 165,align: "center"},
                    {title: "扣款发送时间",key: "sendDate",minWidth: 165,align: "center"},
                    {title: "扣款完成时间",key: "completeDate",minWidth: 165,align: "center"},
                    {title: "备注信息",key: "remarks",minWidth: 165,align: "center"}
                ],
                loading:false,
                searchForm:{contractNo:"",debitAccountName:"",contractStatus:"",debitStatus:"",deductBank:"",startDate:"",endDate:""},
                selectDate: null,
                total:0

            }
        },
        methods:{
            selectDateRange(v) {
                if (v) {
                    this.searchForm.startDate = v[0];
                    this.searchForm.endDate = v[1];
                }
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.queryDebitBatchDetail();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.queryDebitBatchDetail();
            },
            getDic(v){
                let dic = []
                switch(v) {
                    case "deductBank":
                        dic = this.dataDic.deductBank;
                        break;
                    case "batchStatus":
                        dic = this.dataDic.batchStatus;
                        break;
                    case "contractStatus":
                        dic = this.dataDic.contractStatus;
                        break;
                    case "debitStatus":
                        dic = this.dataDic.debitStatus;
                        break;
                    case "feeType":
                        dic = this.dataDic.feeType;
                        break;
                    default:
                }
                return dic;
            },
            setDictTitleByType(v1,v2){
                let dic = {}
                if(!this.getDic(v1)) return '';
                this.getDic(v1).forEach(column => {
                    if(column.value === v2){
                        dic = column;
                    }
                });
                return dic.title;
            },
            closeThisTag(){
                this.afs.closeTab(this);
            },
            initDataDic(){
                let self = this;
                getByTypes(this.dicKeys).then(res => {
                    if (res.code === "0000" && res.data) {
                        self.dataDic = res.data;
                    }
                });
            },
            queryDebitBatch(){
                let param = {
                    id:this.afs.getPageParams(this).batchId
                }
                queryDebitBatch(param).then(res => {
                    if (res.code === "0000") {
                        this.batchJobInfo = res.data;
                    }
                });
            },
            queryDebitBatchDetail(){
                this.searchForm.id = this.afs.getPageParams(this).batchId;
                this.loading = true;
                queryDebitDetailList(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.batchDetailList = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.queryDebitBatchDetail();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.id = this.afs.getPageParams(this).batchId;
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;
                this.searchForm.startDate = "";
                this.searchForm.endDate = "";
                // 重新加载数据
                this.queryDebitBatchDetail();
            },
        },
        mounted(){
            this.initDataDic();
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 10;
            this.queryDebitBatchDetail();
        }
    }
</script>

<style scoped>

</style>
